<template>
  <div class="container">
    <NavBar>
      <div slot="center">个人信息</div>
    </NavBar>
    <div class="userInfo">
      <div class="avatar"><img :src="userInfo.headPortrait"></div>
      <div class="use">
        <div class="name">{{userInfo.name}}</div>
        <div class="yuan">{{ userInfo.position }}</div>
      </div>
      <div class="image" @click="setClick"><img src="../../../assets/image/向右.png"></div>
    </div>
    <div class="detail">
      <div class="item">
        <div @click="change"><img src="../../../assets/image/我的团队.png"></div>
        <div>我的团队</div>
      </div>
      <div class="item1" @click="moveToAll">
        <div><img src="../../../assets/image/考勤.png"></div>
        <div>考勤记录</div>
      </div>
      <div class="set" @click="">
        <div><img src="../../../assets/image/请假.png"></div>
        <div>请假</div>
      </div>
      <div class="notice">
        <div><img src="../../../assets/image/通知中心.png"></div>
        <div>查看通知</div>
      </div>
    </div>
    <div class="offLogin" @click="offLogin">退出登录</div>
    <maintabbar/>
  </div>
</template>

<script>
import maintabbar from "../maintabbar/maintabbar";
import {requestUserInfo} from "../../../network/request";
import NavBar from "../../common/navbar/NavBar";
import Detail from "../detail/detail";

export default {
  name: "profile",
  components: {
    Detail,
    maintabbar,
    NavBar
  },
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    setClick(){
      this.$router.push('set')
    },
    offLogin() {
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      this.$router.push('main')
    },
    change() {

    },
    moveToAll(){
      this.$router.push('all')
    }
  },
  mounted() {
    let that = this
    let token = localStorage.getItem('token')
    this.token = token
    requestUserInfo(token).then(res => {
      that.userInfo = res.data.obj
      localStorage.setItem('userInfo', JSON.stringify(res.data.obj))
    })
  }
}
</script>

<style scoped>
.container {
  background-image: url("../../../../src/assets/image/background.png");
  height: 100vh;
  width: 100%;
  background-size: 100% 100%;
}

.use {
  margin-left: 20px;
  margin-bottom: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}

.detail {
  margin-top: 20px;
  height: 100px;
  width: 90%;
  margin-left: 5%;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}

.yuan {
  background-color: #755AFF;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
}

.avatar {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
}

.set {
  background-color: #FD6880;
  height: 150px;
  border-radius: 20px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 25px;
  margin-top: 20px;
}

.notice {
  background-color: #17AFC4;
  height: 150px;
  border-radius: 20px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 25px;
  margin-top: 20px;
}

.offLogin {
  z-index: 1;
  width: 100px;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  margin-top: 300px;
  margin-left: 155px;
  color: black;
  background-color: #999999;
}

.item {
  background-color: #FFAA3B;
  height: 150px;
  border-radius: 20px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 25px;
  margin-top: 20px;
}

.item1 {
  background-color: #7567F9;
  height: 150px;
  border-radius: 20px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 25px;
  margin-top: 20px;
}

.item img {
  height: 60px;
  width: 60px;
}

.name {
  font-size: 35px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.image img{
  width: 50px;
  height: 50px;
  margin-left: 80px;
}
.userInfo {
  /*background-color:  	rgba(219,233,239,0.8);*/
  margin-top: 20px;
  display: flex;
  padding-top: 20px;
  padding-left: 20px;
  box-shadow: 5px 5px 10px;
  margin-left: 5%;
  width: 350px;
  margin-right: 5%;
  padding-bottom: 20px;
  align-items: center;

}
</style>
